﻿@page "/test1"

<PageTitle>Css Sticky Table</PageTitle>

<h4>Test1</h4>

<div id="wrapper">
    <table class="">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
</div>

<style>
    #wrapper {
        width: 100%;
        height: 150px;
        overflow: auto;
    }

    table {
        width: 100%;
        text-align: center;
        border-collapse: separate; /* Don't collapse */
        border-spacing: 0;
    }

        table th {
            /* Apply both top and bottom borders to the th */
            border-top: 2px solid;
            border-bottom: 2px solid;
            border-right: 2px solid;
        }

        table td {
            /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
            border-bottom: 2px solid;
            border-right: 2px solid;
        }

            table th:first-child,
            table td:first-child {
                /* Apply a left border on the first td or th in a row */
                border-left: 2px solid;
            }

        table thead th {
            position: sticky;
            top: 0;
            background-color: #edecec;
        }
</style>

@code {

}
